<template>
  <div class="tag-require">
    <el-row :gutter="30" class="kpi">
      <el-col :span="6">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="origin-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.thisOriAdd }}</div>
              <p>本月提出</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.thisOriAdd - kpi.lastOriAdd >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.thisOriAdd - kpi.lastOriAdd >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.thisOriAdd - kpi.lastOriAdd >= 0 ? 'up' : 'down']">
                  {{ kpi.oriAddRate }}%
                </span>
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="add-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.thisMonthAdd }}</div>
              <p>本月澄清</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.thisMonthAdd - kpi.lastMonthAdd >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.thisMonthAdd - kpi.lastMonthAdd >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.thisMonthAdd - kpi.lastMonthAdd >= 0 ? 'up' : 'down']">
                  {{ kpi.monthAddRate }}%
                </span>
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="dev-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.thisMonthDev }}</div>
              <p>本月开发</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.thisMonthDev - kpi.lastMonthDev >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.thisMonthDev - kpi.lastMonthDev >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.thisMonthDev - kpi.lastMonthDev >= 0 ? 'up' : 'down']">
                  {{ kpi.monthDevRate }}%
                </span>
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="online-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.thisMonthOnline }}</div>
              <p>本月验收</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.thisMonthOnline - kpi.lastMonthOnline >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.thisMonthOnline - kpi.lastMonthOnline >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.thisMonthOnline - kpi.lastMonthOnline >= 0 ? 'up' : 'down']">
                  {{ kpi.monthOnlineRate }}%
                </span>
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-tabs v-model="activeTab" type="border-card" @tab-click="changeTab" class="tag-tabs">
      <el-tab-pane label="原始标签需求列表" name="require-origin">
        <require-origin ref="require-origin"></require-origin>
      </el-tab-pane>
      <el-tab-pane label="标签需求开发列表" name="require-normal">
        <require-normal ref="require-normal"></require-normal>
      </el-tab-pane>
    </el-tabs> -->
    <el-card>
      <require-normal ref="require-normal"></require-normal>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import requireNormal from './require-normal'
// import requireOrigin from './require-origin'
export default {
  components: {
    requireNormal
    // requireOrigin
  },
  data() {
    return {
      activeTab: 'require-origin',
      kpi: {
        thisOriAdd: 0,
        lastOriAdd: 0,
        oriAddRate: 0,
        thisMonthOnline: 0,
        lastMonthOnline: 0,
        monthOnlineRate: 0,
        thisMonthDev: 0,
        lastMonthDev: 0,
        monthDevRate: 0,
        thisMonthAdd: 0,
        lastMonthAdd: 0,
        monthAddRate: 0
      }
    }
  },
  created() {
    this.getKpi()
  },
  methods: {
    changeTab(tab) {
      if (this.$refs[tab.name].getList) this.$refs[tab.name].getList()
    },
    initKpi(chartName, data, params) {
      let myChart = echarts.init(document.getElementById(chartName))
      let xData = []
      let yData = []
      data.forEach(v => {
        xData.push(v.kpiSn)
        yData.push(v.kpiValue)
      })
      let option = {
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            data: yData,
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: params.lineColor[0]
                  },
                  {
                    offset: 1,
                    color: params.lineColor[1]
                  }
                ])
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: params.areaColor[0]
                },
                {
                  offset: 1,
                  color: params.areaColor[1]
                }
              ])
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getKpi() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagRequireManager/getKPI'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.kpi = data.data
          this.initKpi('origin-chart', data.data.oriAddList, {
            lineColor: ['#5ba2ed', '#6a58f7'],
            areaColor: ['#deedfb', '#dee4fb']
          })
          this.initKpi('add-chart', data.data.monthAddList, {
            lineColor: ['#82f1c6', '#5cbaa5'],
            areaColor: ['#defbf0', '#daefeb']
          })
          this.initKpi('dev-chart', data.data.monthDevList, {
            lineColor: ['#eed264', '#f8a346'],
            areaColor: ['#fbf6de', '#feedda']
          })
          this.initKpi('online-chart', data.data.monthOnlineList, {
            lineColor: ['#ff8e79', '#f9558f'],
            areaColor: ['#ffe8e3', '#fedae7']
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tag-require {
  .el-radio {
    margin-right: 20px;
  }
  .tag-table .el-table__row {
    cursor: pointer;
  }
  .kpi {
    text-align: center;
    margin-bottom: 20px;
    .el-card {
      padding: 10px 0;
      .el-card__body {
        padding: 20px 10px;
      }
    }
    .el-row {
      padding: 10px 0;
    }
    .kpi-chart {
      width: 100%;
      height: 65px;
    }
    .count {
      font-size: 35px;
      font-weight: bold;
      height: 50px;
      color: $theme-color;
    }
    .sign {
      padding-top: 10px;
      height: 50px;
    }
    .arrow {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      line-height: 20px;
      border-radius: 50%;
      &.up {
        background-color: #2fc866;
      }
      &.down {
        background-color: #ee6861;
      }
      i {
        font-weight: bold;
        color: #fff;
        margin-top: 5px;
      }
    }
    .rate {
      font-size: 20px;
      padding-top: 5px;
      &.up {
        color: #2fc866;
      }
      &.down {
        color: #ee6861;
      }
    }
    p {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
